 function Big(ops){
        // 选择元素
        this.sBox = ops.sBox;
        this.sBspan = ops.sBspan;
        this.bBox = ops.bBox;
        this.bBimg = ops.bBimg;
        // 绑定事件
        this.addEvent()
    }
    Big.prototype.addEvent = function(){
        const that = this;
        // 绑定进入
        this.sBox.onmouseover = function(){
            // 显示
            that.show()
        }
        // 绑定离开
        this.sBox.onmouseout = function(){
            // 隐藏
            that.hide()
        }
        // 绑定移动
        this.sBox.onmousemove = function(eve){
            const e = eve || window.event;
            // 移动
            that.move(e);
        }
    }
    Big.prototype.show = function(){
        this.bBox.style.display = "block";
        this.sBspan.style.display = "block";
        // 设置span的尺寸
        // 提醒一定要在显示之后设置，否则，显示之前无法获取css样式
        // 提前获取各种尺寸
        this.sbw = this.sBox.offsetWidth;
        this.sbh = this.sBox.offsetHeight;
        this.bbiw = this.bBimg.offsetWidth;
        this.bbih = this.bBimg.offsetHeight;
        this.bbw = this.bBox.offsetWidth;
        this.bbh = this.bBox.offsetHeight;
    
        // 计算并设置span的尺寸
        this.sBspan.style.width = this.sbw / (this.bbiw / this.bbw) + "px";
        this.sBspan.style.height = this.sbh / (this.bbih / this.bbh) + "px";
    }
    Big.prototype.hide = function(){
        this.bBox.style.display = "none";
        this.sBspan.style.display = "none";
    }
    Big.prototype.move = function(e){
        // 计算当前移动的距离
        let l = e.pageX - this.sBox.offsetLeft - this.sBspan.offsetWidth;
        let t = e.pageY - this.sBox.offsetTop - this.sBspan.offsetHeight;
        // 边界限定
        if(l < 0) l = 0;
        if(t < 0) t = 0;
        if(l > this.sbw - this.sBspan.offsetWidth){
            l = this.sbw - this.sBspan.offsetWidth
        }
        if(t > this.sbh - this.sBspan.offsetHeight){
            t = this.sbh - this.sBspan.offsetHeight
        }
    
        // 设置span的跟随效果
        this.sBspan.style.left = l + "px";
        this.sBspan.style.top = t + "px";
    
        // 计算比例
        // 当前移动的距离 / 一共能移动的距离
        let x = l / (this.sbw - this.sBspan.offsetWidth);
        let y = t / (this.sbh - this.sBspan.offsetHeight);
        console.log(x, y)
    
        // 跟随移动
        // 当前移动的距离 = 总距离 * 比例
        this.bBimg.style.left = (this.bbw - this.bbiw) * x + "px";
        this.bBimg.style.top = (this.bbh - this.bbih) * y + "px";
        console.log(this.bbh - this.bbih)
    }
    new Big({
        sBox:document.querySelector(".s_box"),
        bBox:document.querySelector(".b_box"),
        bBimg:document.querySelector(".b_box img"),
        sBspan:document.querySelector(".s_box span")
    });
    
    let infoObj = JSON.parse(localStorage.getItem("Info")) 
    let src = localStorage.getItem("path")
    var d1 = document.querySelectorAll(".d1 img");
    var osm = document.querySelector(".s_box img"); 
    var obm = document.querySelector(".b_box img")
    let total=document.querySelector(".total img")
    
    osm.src = infoObj.src;
    obm.src= infoObj.src;
    total.src=infoObj.src;
    
    // 改价格
    let price = document.querySelector('.four')
    price.innerHTML = `￥${infoObj.price}`
    // 改名字
    let nameObj = document.querySelector('.id2') 
    nameObj.innerHTML = infoObj.name
    
    for(var i=0;i<d1.length;i++){
        d1[i].onclick = function(){
            osm.src = this.src;
            obm.src= this.src;
        }
    }